import ColorLineText from '@/page-components/ColorLineText';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import styles from './index.less';
const DateText = (props: any) => {
  const { title, content, ...rest } = props;
  const [duration, setDuration] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });

  useEffect(() => {
    // 设置起始时间为 2022-02-02 00:00:00
    const startDate = dayjs('2022-02-01T00:00:00');

    // 立即执行一次计算
    const calculateDuration = () => {
      const now = dayjs();
      const totalSeconds = Math.floor(now.diff(startDate) / 1000);

      setDuration({
        days: Math.floor(totalSeconds / 86400),
        hours: Math.floor((totalSeconds % 86400) / 3600),
        minutes: Math.floor((totalSeconds % 3600) / 60),
        seconds: totalSeconds % 60,
      });
    };
    // 初始调用
    calculateDuration();

    // 设置定时器每秒更新
    const timer = setInterval(calculateDuration, 1000);

    // 清除定时器
    return () => clearInterval(timer);
  }, []);
  return (
    <div className={styles.dateText} {...rest}>
      <div className={styles?.dateTextTp}>
        <ColorLineText
          content={title ? title : '今天，是我们在一起的'}
        ></ColorLineText>
      </div>
      <div className={styles.dateTextBm}>
        <ColorLineText
          content={
            content
              ? content
              : `第 ${duration.days} 天 ${duration.hours} 小时
          ${duration.minutes} 分 ${duration.seconds} 秒`
          }
        ></ColorLineText>
      </div>
    </div>
  );
};

export default DateText;
